<template>
    <div class='container'>
        <!-- 页面头部 -->
        <page-header title="投票详情" @heightChange="handleHeaderHeightChange" />

        <!-- 活动宣传图 -->
        <view class="banner-section">
            <image class="banner-image" src="/static/images/vote-banner.jpg" mode="aspectFill" />
            <view class="banner-overlay">
                <view class="banner-title">{{ voteDetail.title }}</view>
                <view class="banner-subtitle">{{ voteDetail.subtitle }}</view>
            </view>
        </view>

        <!-- 活动概述 -->
        <view class="overview-section">
            <view class="overview-grid">
                <view class="overview-item">
                    <view class="overview-num">{{ voteDetail.participants }}</view>
                    <view class="overview-label">参与人数</view>
                </view>
                <view class="overview-item">
                    <view class="overview-num">{{ voteDetail.totalVotes }}</view>
                    <view class="overview-label">投票总数</view>
                </view>
                <view class="overview-item">
                    <view class="overview-num">{{ voteDetail.worksCount }}</view>
                    <view class="overview-label">参与作品</view>
                </view>
                <view class="overview-item">
                    <view class="overview-num">{{ voteDetail.countdown }}</view>
                    <view class="overview-label">距离结束</view>
                </view>
            </view>
        </view>

        <!-- 活动规则 -->
        <view class="rules-section">
            <view class="rules-header">
                <uni-icons type="info" size="24" color="#007AFF"></uni-icons>
                <view class="rules-title">活动规则</view>
            </view>
            <view class="rules-content">
                <view class="rule-item" v-for="(rule, index) in voteDetail.rules" :key="index">
                    <view class="rule-number">{{ index + 1 }}</view>
                    <view class="rule-text">{{ rule }}</view>
                </view>
            </view>
        </view>

        <!-- 作品列表 -->
        <view class="works-section">
            <view class="section-header">
                <view class="header-left">
                    <uni-icons type="star" size="24" color="#007AFF"></uni-icons>
                    <view class="section-title">参与作品</view>
                    <view class="works-count">({{ worksList.length }})</view>
                </view>
                <view class="header-right" @click="handleToWorksListPageButtonClick">
                    <view class="list-link">去列表</view>
                    <uni-icons type="right" size="16" color="#666"></uni-icons>
                </view>
            </view>
            <view class="works-list">
                <view class="work-item" v-for="(work, index) in worksList" :key="work.id">
                    <view class="work-image-container">
                        <image class="work-image" :src="work.image" mode="aspectFill" />
                        <view class="work-rank" v-if="work.rank">
                            <view class="rank-text">第{{ work.rank }}名</view>
                        </view>
                    </view>
                    <view class="work-info">
                        <view class="work-title">{{ work.title }}</view>
                        <view class="work-author">作者：{{ work.author }}</view>
                        <view class="work-desc">{{ work.description }}</view>
                        <view class="work-stats">
                            <view class="stat-item">
                                <uni-icons type="heart" size="16" color="#ff4757"></uni-icons>
                                <view class="stat-text">{{ work.votes }}票</view>
                            </view>
                            <view class="stat-item">
                                <uni-icons type="eye" size="16" color="#666"></uni-icons>
                                <view class="stat-text">{{ work.views }}浏览</view>
                            </view>
                        </view>
                    </view>
                    <view class="work-actions">
                        <button class="vote-btn" :class="{ 'voted': work.hasVoted }"
                            @click="handleVoteButtonClick(work)">
                            <view>{{ work.hasVoted ? '已投票' : '投票' }}</view>
                        </button>
                    </view>
                </view>
            </view>

            <!-- 加载更多 -->
            <view class="load-more" v-if="hasMore">
                <view class="load-more-btn" @click="handleLoadMoreButtonClick">
                    <view>加载更多</view>
                </view>
            </view>
        </view>

        <!-- 底部导航栏 -->
        <page-bottom pageUrl="/pages-vote/Index" @navClick="handleTabClick" @heightChange="handleBottomHeightChange" />
    </div>
</template>

<script>
// 结构
import {
    defineComponent,
    onMounted,
    ref,
    reactive,
    computed
} from 'vue';
// 模块化
import PageHeader from '@/components/PageHeader.vue';
import PageBottom from '@/components/PageBottom.vue';

export default defineComponent({
    name: 'VoteDetail', // 组件名称
    props: {
        // 接收父组件数据

    },
    components: {
        PageHeader,
        PageBottom
    },
    // 主要是组件内交互事件
    setup(props, ctx) {
        // 这里没有this,直接使用props里数据
        // 进行数据的定义和初始化。object style interactive
        onMounted(() => { });

        // ===== 响应式对象 =====
        // 头部高度相关数据
        const headerHeight = ref(0);
        const bottomHeight = ref(0);

        // 投票详情数据
        const voteDetail = ref({
            id: 1,
            title: '2024年度最佳员工评选',
            subtitle: '评选年度表现最优秀的员工，表彰先进，激励团队',
            participants: 256,
            totalVotes: 1245,
            worksCount: 18,
            countdown: '3天12小时',
            rules: [
                '每人最多可投3票，不能重复投票给同一作品',
                '投票截止时间为2024年3月31日23:59',
                '最终排名按得票数从高到低排序',
                '如有并列情况，按提交时间先后排序',
                '投票结果将在活动结束后3个工作日内公布'
            ]
        });

        // 作品列表数据
        const worksList = ref([
            {
                id: 1,
                title: '创新项目A',
                author: '张三',
                description: '这是一个具有创新性的项目，展现了团队协作和创新能力',
                image: '/static/images/work1.jpg',
                votes: 156,
                views: 234,
                rank: 1,
                hasVoted: false
            },
            {
                id: 2,
                title: '技术突破B',
                author: '李四',
                description: '在技术领域取得了重要突破，为公司发展做出贡献',
                image: '/static/images/work2.jpg',
                votes: 142,
                views: 198,
                rank: 2,
                hasVoted: true
            },
            {
                id: 3,
                title: '服务优化C',
                author: '王五',
                description: '优化了客户服务流程，提升了客户满意度',
                image: '/static/images/work3.jpg',
                votes: 128,
                views: 176,
                rank: 3,
                hasVoted: false
            }
        ]);

        // 加载更多相关数据
        const hasMore = ref(true);
        const isLoading = ref(false);
        const currentPage = ref(1);

        // ===== 计算属性 =====
        // 移除containerStyle计算属性，直接在CSS中使用v-bind

        // ===== 方法函数 =====
        // 处理头部高度变化
        const handleHeaderHeightChange = (heightInfo) => {
            headerHeight.value = heightInfo.totalHeaderHeight;
        };

        // 处理底部高度变化
        const handleBottomHeightChange = (heightInfo) => {
            bottomHeight.value = heightInfo.totalBottomHeight;
        };

        // 处理投票按钮点击
        const handleVoteButtonClick = (work) => {
            if (work.hasVoted) {
                uni.showToast({
                    title: '您已经投票给此作品',
                    icon: 'none'
                });
                return;
            }

            uni.showModal({
                title: '确认投票',
                content: `确定要投票给"${work.title}"吗？`,
                success: (res) => {
                    if (res.confirm) {
                        // TODO: 调用投票接口
                        work.hasVoted = true;
                        work.votes += 1;
                        uni.showToast({
                            title: '投票成功',
                            icon: 'success'
                        });
                    }
                }
            });
        };

        // 处理去列表页面按钮点击
        const handleToWorksListPageButtonClick = () => {
            uni.navigateTo({
                url: `/pages-vote/WorksList?id=${voteDetail.value.id}`
            });
        };

        // 处理加载更多按钮点击
        const handleLoadMoreButtonClick = () => {
            if (isLoading.value) return;

            loadMoreWorks();
        };

        // 处理底部导航点击
        const handleTabClick = (item) => {
            console.log('切换到:', item.path);
        };

        // ===== 生命周期钩子 =====
        onMounted(() => {
            // 可以在这里加载实际数据
            loadVoteDetail();
        });

        // 加载投票详情数据
        const loadVoteDetail = async () => {
            try {
                // TODO: 调用实际接口获取数据
                // const res = await getVoteDetail(this.$route.query.id);
                // voteDetail.value = res.detail;
                // worksList.value = res.works;
            } catch (error) {
                console.error('加载投票详情失败:', error);
                uni.showToast({
                    title: '加载数据失败',
                    icon: 'none'
                });
            }
        };

        // 加载更多作品数据
        const loadMoreWorks = async () => {
            if (isLoading.value) return;

            isLoading.value = true;

            try {
                // TODO: 调用实际接口获取更多数据
                // const res = await getWorksList({
                //     voteId: voteDetail.value.id,
                //     page: currentPage.value + 1,
                //     pageSize: 10
                // });

                // 模拟加载更多数据
                setTimeout(() => {
                    const newWorks = [
                        {
                            id: worksList.value.length + 1,
                            title: '新作品D',
                            author: '赵六',
                            description: '这是一个新的参赛作品，展示了独特的创意和想法',
                            image: '/static/images/work4.jpg',
                            votes: 98,
                            views: 145,
                            rank: 4,
                            hasVoted: false
                        }
                    ];

                    worksList.value.push(...newWorks);
                    currentPage.value += 1;

                    // 模拟没有更多数据
                    if (currentPage.value >= 3) {
                        hasMore.value = false;
                    }

                    isLoading.value = false;
                }, 1000);

            } catch (error) {
                console.error('加载更多作品失败:', error);
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                });
                isLoading.value = false;
            }
        };

        // ===== 返回数据和方法 =====
        return {
            // 响应式对象
            headerHeight,
            bottomHeight,
            voteDetail,
            worksList,
            hasMore,
            isLoading,
            currentPage,

            // 计算属性
            // containerStyle, // Removed as per edit hint

            // 方法函数
            handleHeaderHeightChange,
            handleBottomHeightChange,
            handleVoteButtonClick,
            handleToWorksListPageButtonClick,
            handleLoadMoreButtonClick,
            handleTabClick,
            loadVoteDetail,
            loadMoreWorks
        };
    },
    // 组件之间交互事件
    methods: {

    },
    // 生命周期 - 创建完成（访问DOM元素）
    beforeCreate() {

    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问当前this实例）
    mounted() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    beforeUpdate() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    updated() {

    },
    // 生命周期 - 销毁之前（访问当前this实例）
    unmounted() {

    },
    // 生命周期 - 组件激活（访问当前this实例）
    activated() {

    },
    // 生命周期 - 组件停用（访问当前this实例）
    deactivated() {

    },
    // 生命周期 - 子孙组件错误时
    errorCaptured() {

    }
});
</script>
<style lang='less' scoped>
/* scoped 使用得定义的样式只在本页面内生效  */
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-top: v-bind('headerHeight + "px"');
    padding-bottom: v-bind('bottomHeight + "px"');

    // 活动宣传图
    .banner-section {
        position: relative;
        width: 100%;
        height: 400rpx;
        overflow: hidden;

        .banner-image {
            width: 100%;
            height: 100%;
        }

        .banner-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 40rpx 30rpx;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));

            .banner-title {
                display: block;
                font-size: 36rpx;
                font-weight: bold;
                color: #ffffff;
                margin-bottom: 10rpx;
            }

            .banner-subtitle {
                font-size: 28rpx;
                color: #ffffff;
                opacity: 0.9;
            }
        }
    }

    // 活动概述
    .overview-section {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .overview-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30rpx;

            .overview-item {
                text-align: center;
                padding: 20rpx;

                .overview-num {
                    display: block;
                    font-size: 40rpx;
                    font-weight: bold;
                    color: #007AFF;
                    margin-bottom: 10rpx;
                }

                .overview-label {
                    font-size: 26rpx;
                    color: #666;
                }
            }
        }
    }

    // 活动规则
    .rules-section {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .rules-header {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            .rules-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-left: 12rpx;
            }
        }

        .rules-content {
            .rule-item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 20rpx;

                &:last-child {
                    margin-bottom: 0;
                }

                .rule-number {
                    width: 40rpx;
                    height: 40rpx;
                    background-color: #007AFF;
                    color: #ffffff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 24rpx;
                    font-weight: bold;
                    margin-right: 20rpx;
                    flex-shrink: 0;
                }

                .rule-text {
                    flex: 1;
                    font-size: 28rpx;
                    color: #666;
                    line-height: 1.6;
                }
            }
        }
    }

    // 作品列表
    .works-section {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .header-left {
                display: flex;
                align-items: center;

                .section-title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-left: 12rpx;
                }

                .works-count {
                    font-size: 26rpx;
                    color: #666;
                    margin-left: 10rpx;
                }
            }

            .header-right {
                display: flex;
                align-items: center;

                .list-link {
                    font-size: 26rpx;
                    color: #666;
                    margin-right: 8rpx;
                }
            }
        }

        .works-list {
            .work-item {
                display: flex;
                align-items: flex-start;
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f2f2f2;

                &:last-child {
                    border-bottom: none;
                }

                .work-image-container {
                    position: relative;
                    width: 160rpx;
                    height: 160rpx;
                    flex-shrink: 0;
                    margin-right: 20rpx;

                    .work-image {
                        width: 100%;
                        height: 100%;
                        border-radius: 12rpx;
                    }

                    .work-rank {
                        position: absolute;
                        top: 10rpx;
                        right: 10rpx;
                        background-color: #ff4757;
                        color: #ffffff;
                        padding: 4rpx 12rpx;
                        border-radius: 20rpx;
                        font-size: 20rpx;
                    }
                }

                .work-info {
                    flex: 1;
                    margin-right: 20rpx;

                    .work-title {
                        font-size: 30rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 8rpx;
                    }

                    .work-author {
                        font-size: 24rpx;
                        color: #666;
                        margin-bottom: 10rpx;
                    }

                    .work-desc {
                        font-size: 26rpx;
                        color: #666;
                        margin-bottom: 16rpx;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

                    .work-stats {
                        display: flex;
                        gap: 20rpx;

                        .stat-item {
                            display: flex;
                            align-items: center;

                            .stat-text {
                                font-size: 24rpx;
                                color: #666;
                                margin-left: 6rpx;
                            }
                        }
                    }
                }

                .work-actions {
                    .vote-btn {
                        min-width: 140rpx;
                        height: 60rpx;
                        background-color: #007AFF;
                        color: #ffffff;
                        border: none;
                        border-radius: 30rpx;
                        font-size: 26rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0 20rpx;

                        &.voted {
                            background-color: #999;
                        }
                    }
                }
            }
        }

        .load-more {
            margin-top: 30rpx;
            text-align: center;

            .load-more-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 20rpx 40rpx;
                background-color: #f8f8f8;
                border-radius: 30rpx;
                font-size: 28rpx;
                color: #666;
            }
        }
    }
}
</style>